<style>
  #loginInput1,#loginInput2{
    padding-left: 35px;
  }
  .el-input__inner{
    height: 30px !important;
    line-height: 30px !important;
  }
</style>
<template>
  <div class="login">
    <!--顶部-->
    <div class="login_top">
      <div class="lt_logo"></div>
    </div>
    <!--内容-->
    <div class="content" :style="'height:' + content_height + 'px'">
      <div class="login_con">
        <!--标题-->
        <div class="lc_title">账号登录</div>
        <!--内容-->
        <div class="lc_con">
          <div class="lcc_input">
            <div class="lcc_icon">
              <div class="lcci_bg lcci_userName"></div>
            </div>
            <el-input id="loginInput1" v-model="userName" placeholder="请输入用户名" clearable></el-input>
          </div>
          <div class="lcc_input">
            <div class="lcc_icon">
              <div class="lcci_bg lcci_passWord"></div>
            </div>
            <el-input id="loginInput2" type="password" v-model="passWord" placeholder="请输入密码" clearable @keyup.enter.native="login"></el-input>
          </div>
          <!--<div class="forGet">-->
            <!--<label>忘记密码？</label>-->
            <!--<span>请联系管理员</span>-->
          <!--</div>-->
          <div class="button"><el-button type="primary" @click="login">登录</el-button></div>
        </div>
      </div>
    </div>
    <!--脚部-->
    <div class="footer"></div>
  </div>
</template>

<script>
  import {mapGetters,mapActions} from 'vuex'
  export default {
    name: "login-index",
    computed:mapGetters([
      'TDshow',
      'TTDshow',
      'loopStop'
    ]),
    data() {
      return {
        content_height:0, //内容板块高度
        userName:'', //用户名
        passWord:'', //密码
      }
    },
    created() {
      let self = this
      let conHeight = window.innerHeight;
      self.content_height = conHeight - 257
    },
    mounted() {
    },
    methods:{
      ...mapActions([
        'upstate'
      ]),
      login() {
        let self = this
        self.upstate({key:'TDshow',val:true})
        self.upstate({key:'TTDshow',val:true})
        self.$http.post(self.conURL + 'token',{
          username:self.userName,
          password:self.passWord
        }).then(res => {
          if (res.data.status == 'success'){
            let date = new Date().getTime()
            let time = parseFloat(date) + parseFloat(res.data.data.expires_in)
            localStorage.setItem('access_token',res.data.data.access_token)
            localStorage.setItem('expires_in',time)
            localStorage.setItem('refresh_token',res.data.data.refresh_token)
            //获取当前登录用户信息
            self.$http.post(self.conURL + 'hotel/work/userinfo').then(userRes => {
              if (userRes.data.code == 0){
                self.upstate({key:'loginUserInfo',val:userRes.data.data})
                self.upstate({key:'otaList',val:userRes.data.data.hotel_params.ota_list})
                localStorage.setItem('userName',userRes.data.data.name)
                localStorage.setItem('hotelName',userRes.data.data.hotel_name)
                localStorage.setItem('hotelLogo',userRes.data.data.hotel_info.logo)
                localStorage.setItem('otaList',JSON.stringify(userRes.data.data.hotel_params.ota_list))

                sessionStorage.setItem('JG_signature',JSON.stringify(userRes.data.data.jg_info.signature))
                sessionStorage.setItem('JG_userName',userRes.data.data.jg_info.jg_user)
                sessionStorage.setItem('JG_passWord',userRes.data.data.jg_info.jg_pass)

                //保存协议客户
                sessionStorage.setItem('agreement_customers',JSON.stringify(userRes.data.data.hotel_params.agreement_customers)) //协议客户列表
                sessionStorage.setItem('agreement_projects',JSON.stringify(userRes.data.data.hotel_params.agreement_projects)) //协议客户方案
                sessionStorage.setItem('barList',JSON.stringify(userRes.data.data.hotel_params.all_goods)) //酒店吧商品
                setTimeout(() => {
                  self.$router.push('/index')
                },1000)
              }else {
                self.upstate({key:'TDshow',val:false})
                self.upstate({key:'TTDshow',val:false})
                self.createMess('登录失败，请重新登录')
                localStorage.setItem('access_token','')
                localStorage.setItem('expires_in','')
                localStorage.setItem('refresh_token','')
              }
            })
          }else {
            self.upstate({key:'TDshow',val:false})
            self.upstate({key:'TTDshow',val:false})
            self.createMess('账号或密码错误')
          }
        })
      },
      //接口请求失败，提示信息
      createMess(msg){
        this.$notify.error({
          title: '错误',
          message: msg
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  .login{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;
    position: relative;
    /*过渡动画板块*/
    .transitionDiv{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: #333;
      z-index: 999;
      opacity: 0;
      animation: showTD 1s;
      -moz-animation: showTD 1s;	/* Firefox */
      -webkit-animation: showTD 1s;	/* Safari 和 Chrome */
      -o-animation: showTD 1s;
      animation-fill-mode:forwards;
      .text{
        font-size: 50px;
        color: #fff;
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translateX(-50%);
        span:last-child{
          font-size: 25px;
          display: block;
          text-align: center;
        }
      }
    }
    @keyframes showTD
    {
      from {opacity: 0;}
      to {opacity: 1;}
    }
    /*头部*/
    .login_top{
      width: 100%;
      height: 127px;
      padding-left: 208px;
      padding-top: 34px;
      box-sizing: border-box;
      .lt_logo{
        width: 382px;
        height: 50px;
        background: url("../../assets/login/companyLogo.png") no-repeat;
        background-size: contain;
      }
    }
    /*内容*/
    .content{
      width: 100%;
      background: url("../../assets/login/background_img.png") no-repeat;
      background-size: cover;
      position: relative;
      .login_con{
        width: 397px;
        height: 440px;
        box-sizing: border-box;
        border: 1px solid #b6b6b6;
        position: absolute;
        right: 18%;
        top: 20%;
        background: #fff;
        .lc_title{
          width: 100%;
          height: 66px;
          padding-left: 44px;
          line-height: 66px;
          box-sizing: border-box;
          border-bottom: 1px solid #74a7ce;
          color: #74a7ce;
          font-size: 24px;
        }
        .lc_con{
          width: 100%;
          height: 373px;
          padding: 69px 37px 55px 38px;
          box-sizing: border-box;
          .lcc_input{
            width: 100%;
            position: relative;
            .lcc_icon{
              width: 28px;
              height: 28px;
              position: absolute;
              left: 1px;
              top: 1px;
              border-top-left-radius: 3px;
              border-bottom-left-radius: 3px;
              background-color: #cdcdcd;
              z-index: 10;
              .lcci_userName{
                background: url("../../assets/login/userName.png") no-repeat;
              }
              .lcci_passWord{
                background: url("../../assets/login/passWord.png") no-repeat;
              }
              .lcci_bg{
                width: 80%;
                height: 80%;
                margin: auto;
                margin-top: 10%;
                background-size: contain;
                background-position: center;
              }
            }
          }
          .lcc_input:nth-child(2){
            margin-top: 26px;
          }
          .forGet{
            margin-top: 55px;
            width: 100%;
            height: 15px;
            line-height: 15px;
            font-size: 14px;
            padding-left: 9px;
            box-sizing: border-box;
            margin-bottom: 27px;
            label{
              color: #1f8bc9;
              margin-right: 5px;
            }
          }
          .button{
            width: 100%;
            height: 42px;
            text-align: center;
            margin-top: 55px;
            button{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    /*脚部*/
    .footer{
      width: 100%;
      height: 130px;
    }
  }
</style>
